Den ultimative guide til CSS

CSS, som står for Cascading Style Sheets, giver dig et hav af spændende muligheder, og kan potentielt spare dig for en masse arbejde, når det kommer til designet på din hjemmeside. CSS intet mindre end uundværlig for enhver der arbejder med webdesign.

Derfor skal du selvfølgelig også lære det, og derfor har vi skrevet denne ultimative guide til at lære CSS.

Målet med denne guide er, at give dig en let, men også grundig indførsel i hvordan du kommer igang med at bruge CSS på din egen hjemmeside.

Guiden starter helt fra bunden, men kræver dog, at du allerede kender lidt til HTML.

Derfor kan vi anbefale dig, at du læser vores ultimative guide til HTML, inden du går igang, hvis du ikke allerede har godt styr på HTML.

Når du nu skal i gang med guiden, så er det vigtigt at huske på, at du også selv skal prøve tingene af.

Hvis du blot læser guiden uden at prøve tingene af i praksis, så lærer du ikke noget. Så fat tasterne og prøve tingene af selv!

Hvilke programmer skal jeg bruge?

Der skal faktisk ikke så meget til at gå i krig med CSS. Lige som med HTML, så anbefaler vi, at du bruger programmet ATOM, så er utrolig nemt at bruge. Det virker desuden både til Mac og Windows.

Hvad er forskellen på CSS og HTML?

Det korte svar er at HTML er et struktur-sprog, og CSS er et layout-sprog.

Det kan godt lyde lidt forvirrende, hvis man aldrig har tænkt over det før, men prøv alligevel at læse lidt videre.

Oprindeligt – da Internettet blev opfundet – var HTML et rent struktursprog. Det vil sige at man med HTML kunne strukturere en tekst ved at sige “Dette er en overskrift”, “Dette er et tekstafsnit”, eller “Dette er en tabel” – ved at benytte tags som <h1>, <p> og <table>.

Udviklingen på Internettet gjorde imidlertid, at mange kreative webdesignere hungrede efter muligheder for at tilføje layout til deres dokumenter. Browserfabrikanterne (Netscape og Microsoft) fandt derfor på nye tags til HTML, som f.eks. <font>, der jo netop definerer layout – og ikke struktur.

Udviklingen betød altså, at HTML i støre og større udstrækning blev benyttet til layout, selvom det aldrig havde været meningen. CSS blev opfundet for at give webdesignere flere muligheder for layout, og samtidig beholde HTML som et struktursprog.

Hvorfor er CSS smart?

CSS har rigtig mange fordele. Vi kan f.eks. nævne:

Du kan vedligeholde styling på mange dokumenter centralt fra ét stylesheet
Du kan styre layout mere præcist
Præcisere layout til forskellige medier (skærm, print. m.fl.)

Hvordan fungerer CSS?

CSS fungerer på den måde, at du med CSS kan ændre på dine HTML elementer. Du kan f.eks. ændre kant, baggrund, farve, højde, bredde og meget mere.

Du gør det ved at først at angive en selektor, som siger hvilket element, du gerne vil ramme. Herefter angiver du en egenskab, som er den egenskab på elementet du vil ændre på. Til sidst angiver du en værdi på den egenskab.

Det hele sættes sammen til følgende syntaks.

Selektor {egenskab:værdi;}

Så hvis jeg f.eks. vil lave om på baggrundsfarven på min side kunne jeg lave følgende deklaration:

body {background-color: #EEE;}

Så det er egentlig ret simpelt. udvælg dit html element, angiv hvad du vil ændre på og vælg en værdi for dette, f.eks. en farvekode eller et antal pixels.

Men hvor skal man så lige skrive det her? Jo der er 3 forskellige måder at angive CSS på.

3 metoder til at bruge CSS i et HTML dokument

Metode 1: Atributten style

Den første metode er ved ar bruge atributten style. Dette er en attribut som du påføre dit html element, og heri skriver du din CSS. F.eks.

Metode 2: Elementet style

Du kan også vælge at bruge <style> elementet og skrive din CSS seperat heri. Med style skal du ikke angive en Selektor, da det giver sig selv, nu hvor du sætter style-atributten direkte på elementet, men nu hvor vi bruger elementet style, skal vi bruge en selektor til at bestemmet det element vi vil ramme.

<html>
<head>
<title>Eksempel</title>
<style type="text/css">
	body {background-color: #FF0000;}
</style>
</head>
<body>

Metode 3: Linke til et stylesheet

Dette er lidt lige som ovenfor, men her gør vi istedet det at vi laver en fil kaldet style.css (Den kan hedde det hele, bare den ender på .css), og heri angiver vi vores CSS deklarationer. Denne fil inkluderer vi så på de sider, som skal bruge vores CSS. Dette er den klart bedste måde at anvende CSS, da du kan styre din CSS fra ét centralt sted. Du kan placere CSS filen hvor du vil, men i eksemplet herunder har vi placeret den i roden af vores mappe.

Indholdet i vores .css fil ser således ud:

body {background-color: #FF0000;}

Filen skal så inkluderes på siden som vist herunder

<html>
<head>
<title>Mit dokument</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

Linket fortæller browseren, at den skal hente layout fra CSS-filen. Som du måske har regnet ud, kan flere HTML-dokumenter altså linke til det samme stylesheet, og dermed “hente” sit layout fra den samme fil.

Alene denne mulighed kan spare dig for utroligt meget arbejde. Lad os f.eks. sige at du har et website med 100 HTML-dokumenter – og at du ønsker at ændre baggrundsfarven på dine sider. Hvis du benytter HTML til at definere baggrundsfarven, må du manuelt sidde og rette 100 filer igennem. Men hvis du benytter CSS, kan du gå ind ét sted og rette baggrundsfarven for alle 100 dokumenter på én gang.

Ganske smart ikke?

Prøv selv at gøre dette. Lav en HTML side, inkluder CSS filen og prøv at ændre baggrundsfarven i denne fil. Slår det igennem på din HTML side?

Farver og baggrunde

Noget af det vigtigste du kan bruge CSS til er at styre baggrunde og farver. Farver giver liv til din hjemmeside og sørger for at du igennem hele hjemmesiden kan holde en bestemt stil og design.

I denne sektion kigger vi på, hvilke muligheder der findes for baggrunde og farver i CSS. Vi kan desværre ikke komme omkring dem alle, da der er rigtig mange.

Color

Den allerførste egenskab vi skal kigge på er color. Som du sikkert kan regne ud bruges color til at definere farver.

Lad os sige at vi gerne vil have alle overskrifter i et dokument til at være mørkerøde. Overskrifterne er markeret med elementet <h1>. Derfor knytter vi egenskaben til <h1>:

h1 {
	color: #99FF00;
}

Ovenstående CSS deklaration vil farve teksten på dine overskrifter grøn jf. vores hex-farvekodeskema.

background-color og background-image

Som vi allerede har set på, kan man sætte en baggrund på hele sin side ved at definere background-color på dit body element.

Men man kan faktisk også sætte en baggrund på næste alle elementer. Herunder har vi f.eks. sat det på vores overskrift også:

body {
	background-color: #FFCC66;
}
h1 {
	color:#99FF00;
	background-color: #FC9804;
}

Du kan selvfølgelig også tilføje et baggrunds billede, du skal blot bruge egenskaben background-image:

body {
	background-color: #FFCC66;
	background-image: url("baggrundsbillede.jpeg");
}
h1 {
	color: #990000;
	background-color: #FC9804;
}

Hvis billedet ikke er stort nok til at fylde hele det område du ønsker det skal fylde, kan du evt. gentage billede. Her har du følgende muligheder:

background-repeat: repeat-x = Billedet gentages horisontalt
background-repeat: repeat-y = Billedet gentages vertikalt
background-repeat: repeat = Billedet gentages både horisontalt og vertikalt
background-repeat: no-repeat = Billedet gentages ikke

I eksemplet herunder har vi f.eks. valgt, at vores baggrundsbillede ikke skal gentages:

body {
	background-color: #FFCC66;
	background-image: url("baggrundsbillede.jpeg");
	background-repeat: no-repeat;
}

Et baggrundsbillede kan også placeres forskellige steder med egenskaben “background-position:”.

Her kan du f.eks. angive at baggrunden skal placeres i øverste højre hjørne eller 100 pixel (px) til højre.

Her er et par eksempler:

background-position: 2cm 2cm = Billedet positioneres 2 centimeter fra venstre og 2 cm nede på siden.
background-position: 25% 50% = Billedet positioneres centreret og en fjerdedel nede på siden.
background-position: top right = Billedet positioneres øverst i højre hjørne

Indenfor CSS findes der noget der hedder shorthand , hvilket betyder, at du ikke behøver at skrive alle egenskaberne og deres værdi på hver deres linje som herunder

background-color: #FFCC66;
background-image: url("baggrundsbillede.jpeg");
background-repeat: no-repeat;
background-position: right bottom;

Istedet kan du blot skrive dem alle under én egenskab, nemlig “background”.

Du kan således lave én deklaration der ser således ud:

background: [background-color] [background-image] [background-repeat] [background-position]

Hvilket med ovenstående eksempel giver:

background: #FFCC66 url("baggrundsbillede.jpeg") fixed right bottom;

Fonte

Dine tekster skal selvfølgelig også have et unikt look, og det kan du selvfølgelig også gøre med CSS.

Det giver egentlig meget sig selv, så vi tager dem lige hurtigt.

font-style:

Her kan du angive dens til teksten skal have. Skal det være skråskrift kan du angive “itallic”. Husk at du altid selv kan google “font-style properties” for at få en samlede liste med værdier til denne egenskab.

font-weight:

Her kan du angive om din tekst f.eks. skal stå med fed “bold” eller med en værdi på tykkelse for 100-600.

font-size:

Denne giver vist lidt sig selv, men her kan du mest hvor stor din font skal være. Du kan enten bruge pixels (px) eller em.

font-family:

Her kan du angive den skrifttype du ønsker at anvende. Du kan f.eks. vælge “arial, sans-serif” eller vælge en Google font, f.eks. Open Sans. Her skal du dog huske at inkludere fonten i dit head tag.

I eksemplet herunder har vi angivet at vores paragraf elementer, altså vores tekst skal stå med kursiv (måske ikke helt så hensigtsmæssigt), fed, en størrelse på 20px og med skrifttypen “arial, sans-serif”.

p {
    font-style: italic;
	font-weight: bold;
	font-size: 20px;
	font-family: arial, sans-serif;
}

Prøv selv at lege lidt med værdierne på de forskellige egenskaber og se, hvordan du kan ændre teksten.

Som med så mange andre ting i CSS, kan du også skrive font som shorthand:

p {	
	font: italic bold 30px arial, sans-serif
}

Denne guide er stadig under udarbejdelse og vi arbejder pt. på at skrive den færdig.

Tekst styling

Lige som med fonten, så findes der en masser måde man kan style hele sin tekst på. Den nemmeste måde er nok at vide et komplet eksempel, hvor vi bruge alle de egenskaber der er. Lad os prøve at style vores paragraf-element:

p {
  color: #4CAF50;	
  text-align: center;
  text-transform: uppercase;
  text-indent: 50px;
  letter-spacing: 3px;
  text-decoration: none;
}

Den første egenskab kender vi, og den ændrer på farven på vores tekst. Derefter har vi sagt, at vores tekst skal være centreret. Så hvis vi f.eks. har en meget bred side, så vil teksten blive centreret herpå. Du kan også vælge left og right som værdi på text-align.

Herefter har vi brugt text-transform til at sige at alle bogstaver skal så med stort. Her kan man også vælge lowercase som alternativ.

text-indent angiver en værdi for hvor langt vi vil indrykke den første linje i vores paragraf.

letter-spacing er mellemrummet mellem vores bogstaver. Her er der enstandardværdig, men den kan overskrives til en pixel-værdi, som vi selv bestemmer.

Med text-decoration kan vi enten understerge, gennemstrege eller overstrege vores tekst. I vores tilfælde har jeg valgt ikke at gøre noget, men hvis jeg f.eks. ville understrege, ville jeg vælge “underline”.

Link styling

Når man arbejder med CSS er links noget af det man først prøve at ændre stylingen på. Stylingen af links er lidt forskellige for andre måder at style på, da man her arbejder med stadier. Et link kan have 4 stadier, også kaldet
pseudo-klasser:

For et link som er besøgt skriver man således a:visited, mens et link, som ikke er besøgt skrives a:link, et link som er aktivt har pseudo-classen a:active, mens et link får pseudo-classen a:hover når musen føres over linket, og på tilsvarende måde mister denne pseudo-class når musen ikke længere er over linket.

Pseudo-class :link

Som nævnt ovenfor benyttes :link til at angive egenskaber for links, som endnu ikke er besøgte (det vil sige at brugeren ikke har besøgt den side linket fører til).

Som et eksempel kan vi kigge på det tilfælde at vi ønsker alle ubesøgte links skal være grønne, syntaksen er da:

a:link {
	color: green;
}

Pseudo-class :visited

På samme måde benyttes :visited til at angive egenskaber for links, som er besøgte (det vil sige at brugeren har besøgt den side linket fører til).

Lad os sige at vi ønsker at alle besøgte links skal være gule, dette kan gøres sådan:

a:visited {
	color: yellow;
}

Pseudo-class :active

:active benyttes til at angive egenskaber for links, som aktiveres af brugeren (f.eks. for tidsrummet mellem en bruger klikker på et link, og indtil brugeren slipper musen igen).

I vores eksempel giver vi aktiverede links en rød baggrundsfarve:

a:active {
	background-color: red;
}

Pseudo-class :hover

Pseudo-classen :hover benyttes til at angive hvilke egenskaber, der skal gælde for links, som brugeren fører musen henover.

Lad os sige at vi ønsker vores links skal blive orange og stå med kursiv når musen føres over dem:

a:hover {
	color: orange;
	font-style: italic;
}

Giver det mening? Prøv selv at kopiere koderne ovenfor og sætte dem ind i dit stylesheet og lav så et link på din html side. Fungerer linket som beskrevet ovenfor?

Prøv selv at tilføje flere egenskaber til de forskellige stadier, og se hvordan det påvirker dit link.

Selektion af elementer (class og id)

Hvad gør man, hvis man har to forskellige paragraffer der skal have forskellige stylinger? Eller måske to andre elementer, som skal se præcis ens ud? Jo så skal man hen og bruge klasser (class) eller id.

Hvis du vil ramme flere elementer med den samme styling laver du en klasse.

Hvis kun ét element skal have en specifik styling laver du et id.

Class

Lad os set på et eksempel med en klasse:

<p>Tekst 1</p>
<p>Tekst 2</p>
<p>Tekst 3</p>

I ovenstående eksempel har du 3 paragraffer, men du vil gerne have at to af dem har ens styling mens den sidste bare skal have standard stylingen.

Her kan du lave en klasse og sætte den på de to paragraffer, der skal have den samme styling:

<p class="tekstklasse">Tekst 1</p>
<p>Tekst 2</p>
<p class="tekstklasse">Tekst 3</p>

Klasse ville så se sådan her ud:

.tekstklasse {
	color: orange;
	font-style: italic;
}

Man angiver et klasse med “.” foran. Hvad der står efter punktum, bestemmer du selv, men vælg noget der giver mening og fortæller lidt om, hvad klassen skal bruges til. Min klasse ovenfor kan nu sætte på alle de elementer, hvor teksten skal være orange og stå med kursiv.

Så har du flere elementer der skal styles ens, så laver du en klasse og sætter den på via class attributten som anvist ovenfor.

Id

Hvis du derimod vil ramme ét element og ikke andre, så skal du bruge id. En id styling kan kun bruges én gang. Så hvis du bruger den flere steder, vil browseren kun anvende den første gang den ser den i dit dokument.

Lad os antage, at vi har en række overskrifter, som skal være de samme på hele vores hjemmeside på nær på én side, hvor overskriften skal være ekstra stor.

Her kan vi gå ind og lave en id selector, som kun kan bruges på den ene overskrift:

#specieloverskrift {
	font-size: 40px;
}

Vi angiver et id med “#” og derefter et navn på id stylingen.

Vi kan nu bruge den på vores overskrift.

<h1>Alm overskrift</h1>
<h1>Alm overskrift</h1>
<h1 id="specieloverskrift">Speciel overskrift</h1>
<h1>Alm overskrift</h1>

I eksemplet ovenfor vil alle overskrifter have standard “looket”, mens overskrift nr. 3 vil have vores specielle overskrift styling.

Begrænsning af klasse

Hvis vi gerne vil begrænse vores klasse til et bestemt element, kan vi gøre det ved at skrive element-selektoren foran “.”. Hvis vi f.eks. tager eksemplet fra før, kan vi begrænse vores “tekstklasse” til kun at måtte gælde til p-elementer således:

p.tekstklasse {
	color: orange;
	font-style: italic;
}

Dette kan du gøre med alle klasser og elementer.

Layout med div elementet

I de gamle dage, så opbyggede man ens sides layout med tabeller (som vi allerede har gennemgået). Dette var dog meget upraktisk, og man er derfor idag gået over til at bruge div-tags, altså “divider” tags.

Div-tags bruges således at at opdele din side i området, så du kan flytte rundt på disse og organisere din side, som du ønsker.

Man kan sætte høje (height), bredde (width) og meget mere på sine div-elementer, og på den måde kan man lave området på siden side, som er reserveret til f.eks. en menu, ens indhold, ens footer eller måske et område med afstemninger et billedegalleri. Det skal alt sammmen lægges ind i div-elementer, som du så kan kontrollere, hvor store skal værem hvor høje og hvordan de skal placeres.

Istedet for at vi viser et forkromet eksemplet her, så vil vi faktisk henvise dig til denne Codepen.

Her finder du nemlig et meget standard layout til en hjemmeside med divs. Læg mærke til at div’sne omkranser indhold og at de alle har påført en klasse som styrer, hvor store div-områderne skal være og hvordan de skal være placeret.

Det smarte ved denne “Codepen” er, at du live kan sidde og rette i tingene, så prøv evt. at sætte en baggrundfarve på en af div’sne eller prøv at ændre på højde og bredde.

På den måde vil du får en fornemmelse af, hvordan du kan strukturere din side med div-elementer

Boksmodellen

Når man arbejder med layout, så vil man helt sikkert på et tidspunkt få brug for at rykke sine elementer længere til højre eller tilføje lidt luft mellem kanten af ens div og indholdet. Det kan man henholdvis gøre med egenskaberne margin og padding.

Margin skaber luft mellem elementer mens padding skaber luft inde i selve elementet. Der bedst forklare ved hjælp af det man kalder for boksmodellen. Her har NemProgrammering.dk lavet en rigtig god guide, som vi ikke kan gøre bedre, og derfor kan du læse videre om boksmodellen hos dem.

Der findes masser af andre fasetter af CSS og mange flere muligheder end hvad vi har gennemgået her, opfordrer dig derfor til selv at arbejde videre og prøve nye ting af.

Vi kan blandt andet anbefale NemProgrammering.dk og W3Schools.com.

Her har vi dog givet dig en solid introdution til CSS, som du selv kan bygge videre på 🙂

Den ultimative guide til HTML

HTML.dk

På HTML.dk ❤ vi kode. Vi skriver kode, læser kode og drømmer kode... Her på sitet deler vi ud af vores viden, og har du brug for vores hjælp, skal du være velkommen til at kontakte os!